<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div id="box">
    </div>


    <button id="btn">select</button>
    <script src="./text.js"></script>
    <script>
        var str = `阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡阿斯克火炬大厦接口后端开始对接口贺卡加上动画杰卡斯好极大谁的接口按数据库大会上的健康安徽省接口的黄金卡`
        box.innerHTML = str.split("").reduce((p, v) => p + `<span>${v}</span>`, '')



        btn.onclick = function () {
            var Selection = window.getSelection()
            console.log(Selection, 'SelectionSelection');
            console.log('属性------------------');
            console.log(Selection.anchorNode, 'anchorNode');
            var startNode = Selection.anchorNode.parentElement
            var endNode = Selection.focusNode.parentElement
            var childrens = [...box.children]
            var startIndex = childrens.findIndex(v => v === startNode)
            var endIndex = childrens.findIndex(v => v === endNode)
            console.log(startIndex, endIndex);
            var renge = []
            for (let index = startIndex; index <= endIndex; index++) {
                var el = childrens[index]
                el.classList.add('hover')
                renge.push(el)
            }

            console.log(renge);
            console.log(Selection.focusNode, 'focusNode');
            console.log(Selection.anchorOffset, 'anchorOffset');
            console.log(Selection.focusOffset, 'focusOffset');
            console.log(Selection.isCollapsed, 'isCollapsed');
            console.log(Selection.rangeCount, 'rangeCount');

            var ranges = []
            for (var i = 0; i < Selection.rangeCount; i++) {
                ranges[i] = Selection.getRangeAt(i);
            }
            console.log(ranges);
            // console.log(Selection.type,'type');
            // console.log('方法---------------');
            console.log(Selection.toString(), 'toString()');// 选中的文字

        }
    </script>
</body>

</html>